---
title: Vue
description: Learn how to setup Embla Carousel using Vue.
order: 2
date: 2021-02-21
---

import { Tabs } from 'components/Tabs/Tabs'
import { TabsItem } from 'components/Tabs/TabsItem'
import { TABS_PACKAGE_MANAGER } from 'consts/tabs'

# Vue

Embla Carousel provides a wrapper for [Vue](https://vuejs.org/) that ensures seamless integration of the carousel into your Vue project and automatic cleanup on component unmount.

Start by installing the Embla Carousel **npm package** and add it to your dependencies.

<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>

    ```shell
    npm install embla-carousel-vue --save
    ```

  </TabsItem>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>

    ```shell
    yarn add embla-carousel-vue
    ```

  </TabsItem>
</Tabs>

<Admonition type="note">
  **Note:** `embla-carousel-vue` only supports `Vue 3` and up. However, you can
  use the [core package](/get-started/module/) that `embla-carousel-vue` is
  using under the hood, and re-create the behaviour of `embla-carousel-vue`.
  Here's an [example](https://github.com/meirroth/embla-carousel-vue2) of how
  you can use Embla Carousel with `Vue 2` Options API.
</Admonition>

---

## The component structure

Embla Carousel provides the handy `emblaCarouselVue` function for seamless integration with Vue. A minimal setup requires an **overflow wrapper** and a **scroll container**. Start by adding the following structure to your carousel:

```html
<script setup>
  import emblaCarouselVue from 'embla-carousel-vue'

  const [emblaRef] = emblaCarouselVue()
</script>

<template>
  <div class="embla" ref="emblaRef">
    <div class="embla__container">
      <div class="embla__slide">Slide 1</div>
      <div class="embla__slide">Slide 2</div>
      <div class="embla__slide">Slide 3</div>
    </div>
  </div>
</template>
```

## Styling the carousel

The `emblaCarouselVue` function gives us an **emblaRef** to attach to our wrapping element with the classname `embla`, which is needed to cover the scroll overflow. The element with the `container` classname is the scroll body that scrolls the slides. Continue by adding the following **CSS** to these elements:

```html
<style scoped>
  .embla {
    overflow: hidden;
  }
  .embla__container {
    display: flex;
  }
  .embla__slide {
    flex: 0 0 100%;
    min-width: 0;
  }
</style>
```

## Accessing the carousel API

The `emblaCarouselVue` function takes the Embla Carousel [options](/api/options/) as the first argument. Additionally, you can access the [API](/api/) with an `onMounted` like demonstrated below:

```html highlight={5,7-11}
<script setup>
  import { onMounted } from 'vue'
  import emblaCarouselVue from 'embla-carousel-vue'

  const [emblaRef, emblaApi] = emblaCarouselVue({ loop: false })

  onMounted(() => {
    if (emblaApi.value) {
      console.log(emblaApi.value.slideNodes()) // Access API
    }
  })
</script>

<template>
  <div class="embla" ref="emblaRef">
    <div class="embla__container">
      <div class="embla__slide">Slide 1</div>
      <div class="embla__slide">Slide 2</div>
      <div class="embla__slide">Slide 3</div>
    </div>
  </div>
</template>
```

## Adding plugins

Start by installing the plugin you want to use. In this example, we're going to install the [Autoplay](/plugins/autoplay/) plugin:

<Tabs groupId={TABS_PACKAGE_MANAGER.GROUP_ID}>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.NPM}>

    ```shell
    npm install embla-carousel-autoplay --save
    ```

  </TabsItem>
  <TabsItem tab={TABS_PACKAGE_MANAGER.TABS.YARN}>

    ```shell
    yarn add embla-carousel-autoplay
    ```

  </TabsItem>
</Tabs>

The `emblaCarouselVue` function accepts [plugins](/plugins/) as the second argument. Note that plugins need to be passed in an **array** like so:

```html highlight={3,5}
<script setup>
  import emblaCarouselVue from 'embla-carousel-vue'
  import Autoplay from 'embla-carousel-autoplay'

  const [emblaRef] = emblaCarouselVue({ loop: false }, [Autoplay()])
</script>

<template>
  <div class="embla" ref="emblaRef">
    <div class="embla__container">
      <div class="embla__slide">Slide 1</div>
      <div class="embla__slide">Slide 2</div>
      <div class="embla__slide">Slide 3</div>
    </div>
  </div>
</template>
```

Congratulations! You just created your first Embla Carousel component.
